import React, { Component } from 'react'
import './inputNum.css'
export default class InputNum extends Component {

    add = () => {
        const { count } = this.props;
        if (count <= 14) {
            this.props.setCount(count + 1);
        } else {
            alert('最大值为15');
            return;
        }
    }

    setCount = (e) => {
        const { value } = e.target;
        if (value && value >= 0 && value <= 15) {
            this.props.setCount(value*1);
        } else {
            alert('值必须在0-15之间');
            return;
        }
    }

    reduce = () => {
        const { count } = this.props;
        if (count >= 1) {
            this.props.setCount(count-1);
        } else {
            alert('最小值为0');
            return;
        }
    }

    render() {
        const { count } = this.props;
        return (
            <div className="option">
                {this.props.children}
                <button onClick={this.reduce}>-</button>
                <input className="inputText" type="text" value={count} onChange={this.setCount}></input>
                <button onClick={this.add}>+</button>
            </div>
        )
    }
}
